<!DOCTYPE html> 
<html>
	<head>
		<title>Moodle Question Maker</title>
		<link rel="stylesheet" type="text/css" href="css/index.css"/> 
		<link rel="stylesheet" type="text/css" href="css/topMenu.css"/> 
		<link rel="stylesheet" type="text/css" href="css/sideBar.css"/>
		<link rel="stylesheet" type="text/css" href="css/preview.css"/> 
		<link rel="stylesheet" type="text/css" href="css/questionSeeds.css"/> 
		<link rel="SHORTCUT ICON" type="text/css" href="GFX/qbuilder.ico"/> 
	</head>
	<body>
		<div class="top-menu">
			<div class="message-text"></div>
		</div>
		<div class="content">
			<div class="side-content">
			</div><div class="preview-container">
				<div class="preview"></div>
				<!--<div class="tabs"></div>-->
			</div>
		</div>
		
		<input type="file" class="file-input" style="display:none">
		<script id="top-menu-button-tmpl" data-tmpl-id="top-menu-button-tmpl" type="text/x-jquery-tmpl">
			<div class="top-menu-button"><img src=${img} alt=" " style="vertical-align:-5%;"> ${label}</div>
		</script>
		
		
		<script id="preview-tmpl" data-tmpl-id="preview-tmpl" type="text/x-jquery-tmpl">
		</script>
		
		<script id="tab-tmpl" data-tmpl-id="tab-tmpl" type="text/x-jquery-tmpl">
			<div class="tab">
				<span class="label">${label}</span>
			</div>
		</script>
		
		<script id="export-dialogue-tmpl" data-tmpl-id="export-dialogue-tmpl" type="text/x-jquery-tmpl">
			<div class="export-dialogue">
				<span class="linear-field">File Name: </span><input type="text" class="file-name"><br>
				<span class="linear-field">Format: </span>
				<select class="format-select">
					<option data-value="xml">XML</option>
					<option data-value="txt">Gift</option>
				</select>
				<br><br>
				<div style="text-align:right;">
					<button class="button okay">OK</button>
					<button class="button cancel">Cancel</button>
				</div>
			</div>
		</script>
		
		<script id="save-dialogue-tmpl" data-tmpl-id="save-dialogue-tmpl" type="text/x-jquery-tmpl">
			<div class="save-dialogue">
				<span class="linear-field">File Name: </span><input type="text" class="file-name"><br>
				<br><br>
				<div style="text-align:right;">
					<button class="button okay">OK</button>
					<button class="button cancel">Cancel</button>
				</div>
			</div>
		</script>
		
		<script id="side-bar-tmpl" data-tmpl-id="side-bar-tmpl" type="text/x-jquery-tmpl">
			<div class="side-bar">
				<div class="top">
					<div class="styled-select">
						<select class="type-select">
							<option value="mc-bank" data-value="mc-bank">Generated Multiple Choice</option>
							<option value="mc" data-value="mc">Multiple Choice</option>
							<option value="matching" data-value="matching">Matching</option>
							<option value="truefalse" data-value="truefalse">True/False</option>
							<option value="calculated" data-value="calculated">Calculated</option>
						</select>
					</div>
				</div>
				<div class="middle">
				</div>
				<div class="bottom">
					<button class="button addUpdate">Add</button>
				</div>
			</div>
		</script>
		
		<script id="mc-bank-tmpl" data-tmpl-id="mc-bank-tmpl" type="text/x-jquery-tmpl">
			<div class="seed mcbank-seed" data-id="${id}">
				<table width="100%" cellspacing="0" cellpadding="0" style="position:relative; top:-16px; z-index:0;">
				<tr>
				<td style="vertical-align:top; width:16px;;">
				<!-- <div style="display:inline-block; vertical-align:top;"> -->
				<img src="GFX/mcbank.gif" alt="TF">
				</td>
				<td style=" padding-left:4px;">
				<!-- </div> -->
				<!-- <div style="display:inline-block;"> -->
					{{each(index, value) name}} 				
						<div style="display:inline-block"> 
							<div class="name">${value}</div>
							Q: <span class="preview-qtext">
							{{if qtexts[index]}}
								${qtexts[index]}
							{{/if}}
							</span>
							A: <span>
							{{if atexts[index]}}
								${atexts[index]}
							{{/if}}
							</span><br>
							<div>Feedback:
							{{if feedback[index]}}
								${feedback[index]}
							{{/if}}
							</div>
						</div>
						<hr>
					{{/each}}
					{{if numQuestions}}
						<div>Number to Generate: ${numQuestions}</div>
					{{/if}}
				</td>
				</tr>
				<!-- </div> -->
				</table>
			</div>
		</script>
		
		<script id="mc-bank-sidebar-tmpl" data-tmpl-id="mc-bank-sidebar-tmpl" type="text/x-jquery-tmpl">
			<div class="sidebar-seed mcbank-sidebar">
				<div class="container">
					<div>Number to Generate: </div><input class="seed-data seed-data-single" data-validation="^[0-9]*$" data-attribute="numQuestions" value="${numQuestions}"/>
				</div>
			</div>
		</script>
		
		<script id="mc-bank-particle-tmpl" data-tmpl-id="mc-bank-particle-tmpl" type="text/x-jquery-tmpl">
			<div class="mc-bank-particle">
				<hr class="sidebar-hr">
				<div>Name: </div><input data-attribute="name" class="name seed-data seed-data-array" value="${name}"/><br>
				<div>Question Text: </div><textarea data-attribute="qtexts" class="question seed-data seed-data-array">${question}</textarea><br>
				<div>Answer Text: </div><textarea data-attribute="atexts" class="answer seed-data seed-data-array">${answer}</textarea><br>
				<div>Feedback: </div><textarea data-attribute="feedback" class="feedback seed-data seed-data-array">${feedback}</textarea><br>
			</div>
		</script>
		
		<script id="mc-tmpl" data-tmpl-id="mc-tmpl" type="text/x-jquery-tmpl">
			
			<div class="seed mc-seed" data-id="${id}">
				<div style="display:inline-block; vertical-align:top;">
				<img src="GFX/mc.gif" alt="TF">
				</div>
				<div style="display:inline-block;">
					<div class="name">{{if name}}${name}{{/if}}</div>
					<div class="preview-qtext">{{if qtext}}${qtext}{{/if}}</div>
					<div> 
						{{if atexts[0]}}
							<div>&nbsp;&nbsp;&nbsp;a. ${atexts[0]} (${fraction[0]}%)</div>
						{{/if}}
						{{if atexts[1]}}
							<div>&nbsp;&nbsp;&nbsp;b. ${atexts[1]} (${fraction[1]}%)</div>
						{{/if}}
						{{if atexts[2]}}
							<div>&nbsp;&nbsp;&nbsp;c. ${atexts[2]} (${fraction[2]}%)</div>
						{{/if}}
						{{if atexts[3]}}
							<div>&nbsp;&nbsp;&nbsp;d. ${atexts[3]} (${fraction[3]}%)</div>
						{{/if}}
						{{if atexts[4]}}
							<div>&nbsp;&nbsp;&nbsp;e. ${atexts[4]} (${fraction[4]}%)</div>
						{{/if}}
					</div>
					<div>Feedback: {{if feedback}}${feedback}{{/if}}</div>
				</div>
			</div>
		</script>
		
		<script id="mc-sidebar-tmpl" data-tmpl-id="mc-sidebar-tmpl" type="text/x-jquery-tmpl">
			<div class="sidebar-seed mc-sidebar">
				<div class="container">
					<div>Name: </div><input data-validation="^[\S|\s]*[\S]+[\S|\s]*$" class="seed-data seed-data-single" data-attribute="name" value="${name}"/>
					<div>Question Text: </div><textarea data-validation="^[\S|\s]*[\S]+[\S|\s]*$" data-attribute="qtext" class="seed-data seed-data-single">{{if qtext}}${qtext}{{/if}}</textarea><br>
					<div>Answer Text: </div><textarea data-attribute="atexts" class="seed-data seed-data-array">{{if atexts[0]}}${atexts[0]}{{/if}}</textarea><br>
					<div style="text-align:right;">Score: 
						<span class="frac-cont">
							<input type="text" data-validation="^([0-9]?[0-9]|100)$" data-attribute="fraction" class="seed-data seed-data-array frac-box" value="{{if fraction[0]}}${fraction[0]}{{else}}100{{/if}}" disabled>
							<div class="frac-clicker" style="position:absolute; left:0; right:0; top:0; bottom:0;"></div>
						</span>%
					</div>
					<hr class="sidebar-hr">
					
					<div>Answer Text: </div><textarea data-attribute="atexts" class="seed-data seed-data-array">{{if atexts[1]}}${atexts[1]}{{/if}}</textarea><br>
					<div style="text-align:right">Score: 
						<span class="frac-cont">
							<input type="text" data-validation="^([0-9]?[0-9]|100)$" data-attribute="fraction" class="seed-data seed-data-array frac-box" value="{{if fraction[1]}}${fraction[1]}{{else}}0{{/if}}" disabled>
							<div class="frac-clicker" style="position:absolute; left:0; right:0; top:0; bottom:0;"></div>
						</span>%
					</div>
					<hr class="sidebar-hr">

					<div>Answer Text: </div><textarea data-attribute="atexts" class="seed-data seed-data-array">{{if atexts[2]}}${atexts[2]}{{/if}}</textarea><br>
					<div style="text-align:right">Score: 
						<span class="frac-cont">
							<input type="text" data-validation="^([0-9]?[0-9]|100)$" data-attribute="fraction" class="seed-data seed-data-array frac-box" value="{{if fraction[2]}}${fraction[2]}{{else}}0{{/if}}" disabled>
							<div class="frac-clicker" style="position:absolute; left:0; right:0; top:0; bottom:0;"></div>
						</span>%
					</div>
					<hr class="sidebar-hr">

					<div>Answer Text: </div><textarea data-attribute="atexts" class="seed-data seed-data-array">{{if atexts[3]}}${atexts[3]}{{/if}}</textarea><br>
					<div style="text-align:right">Score: 
						<span class="frac-cont">
							<input type="text" data-validation="^([0-9]?[0-9]|100)$" data-attribute="fraction" class="seed-data seed-data-array frac-box" value="{{if fraction[3]}}${fraction[3]}{{else}}0{{/if}}" disabled>
							<div class="frac-clicker" style="position:absolute; left:0; right:0; top:0; bottom:0;"></div>
						</span>%
					</div>
					<hr class="sidebar-hr">

					<div>Answer Text: </div><textarea data-attribute="atexts" class="seed-data seed-data-array">{{if atexts[4]}}${atexts[4]}{{/if}}</textarea><br>
					<div style="text-align:right">Score: 
						<span class="frac-cont">
							<input type="text" data-validation="^([0-9]?[0-9]|100)$" data-attribute="fraction" class="seed-data seed-data-array frac-box" value="{{if fraction[4]}}${fraction[4]}{{else}}0{{/if}}" disabled>
							<div class="frac-clicker" style="position:absolute; left:0; right:0; top:0; bottom:0;"></div>
						</span>%
					</div>
					<hr class="sidebar-hr">

					<div>Feedback: </div><textarea data-attribute="feedback" class="seed-data seed-data-single">{{if feedback}}${feedback}{{/if}}</textarea><br>
				</div>
			</div>
		</script>
		
		<script id="matching-sidebar-tmpl" data-tmpl-id="matching-sidebar-tmpl" type="text/x-jquery-tmpl">
			<div class="sidebar-seed matching-sidebar">
				<div class="container">
					<div>Name: </div><input data-validation="^[\S|\s]*[\S]+[\S|\s]*$" class="seed-data seed-data-single" data-attribute="name" value="${name}"/>
					<div>Question Text: </div><textarea  data-validation="^[\S|\s]*[\S]+[\S|\s]*$" data-attribute="qtext" class="seed-data seed-data-single">{{if qtext}}${qtext}{{/if}}</textarea><br>
					<div>Feedback: </div><textarea data-attribute="feedback" class="seed-data seed-data-single">{{if feedback}}${feedback}{{/if}}</textarea><br>
				</div>
			</div>
		</script>
		
		<script id="matching-particle-tmpl" data-tmpl-id="matching-particle-tmpl" type="text/x-jquery-tmpl">
			<div class="matching-particle">
				Match Pair:
				<textarea data-attribute="atexts1" class="p1 seed-data seed-data-array mpair-box">${p1}</textarea>
				<textarea data-attribute="atexts2" class="p2 seed-data seed-data-array mpair-box">${p2}</textarea>
				<hr class="sidebar-hr">
			</div>
		</script>
		
		<script id="matching-tmpl" data-tmpl-id="matching-tmpl" type="text/x-jquery-tmpl">
			<div class="seed matching-seed" data-id="${id}">
				<div style="display:inline-block; vertical-align:top;">
				<img src="GFX/matching.gif" alt="TF">
				</div>
				<div style="display:inline-block;">
					<div class="name">{{if name}}${name}{{/if}}</div>
					<div class="preview-qtext">{{if qtext}}${qtext}{{/if}}</div>
					{{each(index, value) atexts1}} 				
						<div>
							&nbsp;&nbsp;&nbsp;
							{{if atexts1[index]}}
								${atexts1[index]}
							{{/if}},
							{{if atexts2[index]}}
								${atexts2[index]}
							{{/if}}
						</div>
					{{/each}}
					<div>Feedback: {{if feedback}}${feedback}{{/if}}</div>
				</div>
			</div>
		</script>
		
		<script id="truefalse-sidebar-tmpl" data-tmpl-id="truefalse-sidebar-tmpl" type="text/x-jquery-tmpl">
			<div class="sidebar-seed truefalse-sidebar">
				<div class="container">
					<div>Name: </div><input data-validation="^[\S|\s]*[\S]+[\S|\s]*$" class="seed-data seed-data-single" data-attribute="name" value="{{if name}}${name}{{/if}}"/>
					<div>Question Text: </div><textarea data-validation="^[\S|\s]*[\S]+[\S|\s]*$" data-attribute="qtext" class="seed-data seed-data-single">{{if qtext}}${qtext}{{/if}}</textarea><br>
					<select data-attribute="atext" class="seed-data seed-data-select">
						<option data-value="true" {{if String(atext)}} {{if String(atext) === "true"}}selected="selected"{{/if}}{{/if}}>True</option>
						<option data-value="false" {{if String(atext)}} {{if String(atext) === "false"}}selected="selected"{{/if}}{{/if}}>False</option>
					</select><br>
					<div>Feedback: </div><textarea data-attribute="feedback" class="seed-data seed-data-single">{{if feedback}}${feedback}{{/if}}</textarea><br>
				</div>
			</div>
		</script>
		
		<script id="truefalse-tmpl" data-tmpl-id="truefalse-tmpl" type="text/x-jquery-tmpl">
			<div class="seed truefalse-seed" data-id="${id}">
				<div style="display:inline-block; vertical-align:top;">
				<img src="GFX/truefalse.gif" alt="TF">
				</div>
				<div style="display:inline-block;">
				<div class="name">{{if name}}${name}{{/if}}</div>
				<span class="preview-qtext">{{if qtext}}${qtext}{{/if}}</span>  (${atext})
				<div>Feedback: {{if feedback}}${feedback}{{/if}}</div>
				</div>
			</div>
		</script>
		
		<script id="calculated-sidebar-tmpl" data-tmpl-id="calculated-sidebar-tmpl" type="text/x-jquery-tmpl">
			<div class="sidebar-seed calculated-sidebar">
				<div class="container">
					<div>Name: </div><input class="seed-data seed-data-single" data-validation="^[\S|\s]*[\S]+[\S|\s]*$" data-attribute="name" value="{{if name}}${name}{{/if}}"/>
					<div>Question Text: </div><textarea data-validation="^[\S|\s]*[\S]+[\S|\s]*$" data-attribute="qtext" class="seed-data seed-data-single">{{if qtext}}${qtext}{{/if}}</textarea><br>
					<div>Answer Formula: </div><input data-validation="^[\S|\s]*[\S]+[\S|\s]*$" data-attribute="atext" class="seed-data seed-data-single" value="{{if atext}}${atext}{{/if}}"/><br>
					<div>Variable Name: </div><input data-validation="^([a-z]|[A-Z])+$" data-attribute="varName" class="seed-data seed-data-single" value="{{if varName}}${varName}{{/if}}"/><br>
					<div>Variable Sig. Figs.: </div><input data-attribute="varDec" data-validation="^[0-9]$" class="seed-data seed-data-single" value="{{if varDec}}${varDec}{{/if}}"/><br>
					<div>Minimum Value: </div><input data-attribute="varMin" data-validation="^[0-9]+\.?[0-9]*$|^\.[0-9]+$" class="seed-data seed-data-single" value="{{if varMin}}${varMin}{{/if}}"/><br>
					<div>Maximum Value: </div><input data-attribute="varMax" data-validation="^[0-9]+\.?[0-9]*$|^\.[0-9]+$" class="seed-data seed-data-single" value="{{if varMax}}${varMax}{{/if}}"/><br>
					<div>Answer Tolerance: </div><input data-attribute="tolerance" data-validation="^[0-9]+\.?[0-9]*$|^\.[0-9]+$" class="seed-data seed-data-single" value="{{if tolerance}}${tolerance}{{/if}}"/><br>
					<div>Answer Format: </div><select data-attribute="correctAnswerFormat" class="seed-data seed-data-select">
						<option data-value="1" {{if correctAnswerFormat}} {{if correctAnswerFormat == 1}}selected="selected"{{/if}}{{/if}}>Decimal</option>
						<option data-value="2" {{if correctAnswerFormat}} {{if correctAnswerFormat == 2}}selected="selected"{{/if}}{{/if}}>Scientific</option>
					</select><br>
					<div>Answer Sig. Figs.: </div><input data-attribute="correctAnswerLength" data-validation="^[0-9]$" class="seed-data seed-data-single" value="{{if correctAnswerLength}}${correctAnswerLength}{{/if}}"/><br>
					<div>Feedback: </div><textarea data-attribute="feedback" class="seed-data seed-data-single">{{if feedback}}${feedback}{{/if}}</textarea><br>
				</div>
			</div>
		</script>
		
		<script id="calculated-tmpl" data-tmpl-id="calculated-tmpl" type="text/x-jquery-tmpl">
			<div class="seed truefalse-seed" data-id="${id}">
				<div style="display:inline-block; vertical-align:top;">
				<img src="GFX/calculated.gif" alt="TF">
				</div>
				<div style="display:inline-block;">
				<div class="name">{{if name}}${name}{{/if}}</div>
				<div>Question Text: {{if qtext}}${qtext}{{/if}}</div>
				<div>Answer Formula: {{if atext}}${atext}{{/if}}</div>
				<div>Feedback: {{if feedback}}${feedback}{{/if}}</div>
				</div>
			</div>
		</script>
	
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/jquery-ui.js"></script>
		<script type="text/javascript" src="js/jquery-tmpl.js"></script>
		<script type="text/javascript" src="js/templates.js"></script>
		<script type="text/javascript" src="js/sideBar.js"></script>
		<script type="text/javascript" src="js/QuestionTypes/MCBank.js"></script>
		<script type="text/javascript" src="js/QuestionTypes/MultiChoice.js"></script>
		<script type="text/javascript" src="js/QuestionTypes/Matching.js"></script>
		<script type="text/javascript" src="js/QuestionTypes/True_False.js"></script>
		<script type="text/javascript" src="js/QuestionTypes/Calculated.js"></script>
		<script type="text/javascript" src="js/XML-Parser.js"></script>
		<script type="text/javascript" src="js/index.js"></script>
		<script type="text/javascript" src="js/topMenu.js"></script>
		<script type="text/javascript" src="js/preview.js"></script>
	</body>
</html>
